<template>
  <div class="filter-list">
    <div v-for="(item, index) in filterList" :key="index" class="filter-item">
      <selectWithoutHttp v-model="item.filterObject" :list-data="filterObjects" class="filter-120" label-name="name" key-name="key" @change="changeFilterObject(item)" />
      <FilterValue
        :filter-item="item"
        :field-list="getSubForm(item)"
        parent-value-key="value"
        key-name="filterField"
        @changeKeyword="changeKeyword" />
      <div class="button-text ml10 bold" @click="copy(item)">复制</div>
      <div class="delete-btn ml10 bold" @click="deleteItem(index)">删除</div>
    </div>
    <div class="button-text" @click="addItem">添加筛选</div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import FilterValue from '../../filterValue';
export default {
  name: 'FormulaFilter',
  components: { selectWithoutHttp, FilterValue },
  model: {
    prop: 'value',
    event: 'changeData'
  },
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    formulaOrigin: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      userList: []
    };
  },
  computed: {
    filterList: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('changeData', val);
      }
    },
    ...mapState({
      'subformField': state => state.formMake.widgetTypes.subform
    }),
    filterObjects() { // 筛选对象
      let arr = [{
        key: 1,
        name: '被引用字段',
        subform: this.formulaField
      }];
      if (this.subformField) arr = arr.concat(this.subformField);
      return arr;
    },
    formulaField() { // 被引用字段
      const hasKey = [];
      return this.formulaOrigin.filter(i => {
        const ans = i.type !== 'math' && i.type !== 'number' && !i.isSubTable && i.type !== 'formulaInput' && !hasKey.includes(i.key);
        if (ans) hasKey.push(i.key);
        return ans;
      });
    }
  },
  created() {
    if (this.filterList) {
      const ans = [];
      this.filterList.forEach(i => {
        i.subform = this.getSubForm(i);
        const element = this.filterObjects.find(j => j.key === i.filterObject);
        if (element) {
          // 判断选择的字段是否还存在于对应筛选对象的 subform 中
          const keys = element.subform.map(i => i.key);
          if (!keys.includes(i.filterField)) {
            i.filterField = '';
            this.changeFilterObject(i);
          }
        }
        if (i.filterObject === 1 || element) {
          ans.push(i);
        }
      });
      this.filterList = ans;
    }
  },
  methods: {
    addItem() {
      this.filterList.push({
        filterObject: '',
        filterField: '',
        math: '=',
        dataType: 'input',
        linkFormKey: '',
        value: {
          value: ''
        }
      });
    },
    copy(item) {
      this.filterList.push(_.cloneDeep(item));
    },
    deleteItem(index) {
      this.filterList.splice(index, 1);
    },
    /**
     * 字段类型判断
     */
    filedType(item) {
      if (!item.filterField) return '';
      if (item.filterObject === 1) return 'number';
      const formSubform = this.getSubForm(item);
      if (formSubform) {
        const el = formSubform.find(i => i.key === item.filterField);
        return el ? el.type : '';
      }
      return '';
    },
    getTableField(item) {
      if (!item.filterField) return '';
      const formSubform = this.getSubForm(item);
      if (formSubform) {
        const el = formSubform.find(i => i.key === item.filterField);
        return el ? el.linkFormKey || '' : '';
      }
      return '';
    },
    /**
     * change 事件
     */
    changeFilterObject(item) {
      if (item.filterObject && item.filterObject !== 1) {
        item.subform = this.getSubForm(item);
      }
      this.$set(item, 'filterField', '');
      this.$set(item, 'math', '=');
      this.$set(item.value, 'value', '');
      this.changeKeyword('', item);
    },
    changeKeyword(filterField, item, type) {
      const filedType = type || this.filedType(item);
      // const types = {
      //   'input': 'string',
      //   'date': 'time'
      // };
      const linkFormKey = this.getTableField(item);
      item.linkFormKey = linkFormKey || '';
      item.dataType = filedType || 'input';
    },
    /**
     * 工具
     */
    getSubForm(item) {
      if (!item.filterObject) return [];
      if (item.filterObject && item.filterObject !== 1) {
        const subformEl = this.filterObjects.find(i => i.key === item.filterObject);
        return subformEl ? subformEl.subform.filter(i => i.type !== 'formulaInput') : [];
      } else {
        return this.formulaField;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-120 {
  margin-right: 10px;
  &::v-deep {
    .el-input__inner {
      width: 120px !important;
    }
  }
}
.filter-80 {
  margin-right: 10px;
  &::v-deep {
    .el-input__inner {
      width: 80px !important;
    }
  }
}
.filter-list {
  width: 100%;
  // &::v-deep {
  //   .el-number-range .input-range-val {
  //     width: 105px !important;
  //   }
  // }
  .filter-item {
    display: flex;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0px;
    }
  }
}
.delete-btn {
  cursor: pointer;
  color: #192452;
  font-size: 14px;
  white-space: nowrap;
}
.ml10 {
  margin-left: 10px;
}
.bold {
  font-weight: bold;
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.button-text {
  white-space: nowrap;
}

</style>
